.root {
  --notification-radius: var(--mantine-radius-default);
  --notification-color: var(--mantine-primary-color-filled);

  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  padding-inline-start: 22px;
  padding-inline-end: var(--mantine-spacing-xs);
  padding-top: var(--mantine-spacing-xs);
  padding-bottom: var(--mantine-spacing-xs);
  border-radius: var(--notification-radius);
  box-shadow: var(--mantine-shadow-lg);

  &::before {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    top: var(--notification-radius);
    bottom: var(--notification-radius);
    inset-inline-start: 4px;
    border-radius: var(--notification-radius);
    background-color: var(--notification-color);
  }

  @mixin where-light {
    background-color: var(--mantine-color-white);
  }

  @mixin where-dark {
    background-color: var(--mantine-color-dark-6);
  }

  &:where([data-with-icon]) {
    &::before {
      display: none;
    }
  }

  &:where([data-with-border]) {
    @mixin where-light {
      border: 1px solid var(--mantine-color-gray-3);
    }

    @mixin where-dark {
      border: 1px solid var(--mantine-color-dark-4);
    }
  }
}

.icon {
  box-sizing: border-box;
  margin-inline-end: var(--mantine-spacing-md);
  width: 28px;
  height: 28px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--notification-color);
  color: var(--mantine-color-white);
}

.loader {
  margin-inline-end: var(--mantine-spacing-md);
}

.body {
  flex: 1;
  overflow: hidden;
  margin-inline-end: var(--mantine-spacing-xs);
}

.title {
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--mantine-font-size-sm);
  line-height: var(--mantine-line-height-sm);
  font-weight: 500;

  @mixin where-light {
    color: var(--mantine-color-gray-9);
  }

  @mixin where-dark {
    color: var(--mantine-color-white);
  }
}

.description {
  font-size: var(--mantine-font-size-sm);
  line-height: var(--mantine-line-height-sm);
  overflow: hidden;
  text-overflow: ellipsis;

  @mixin where-light {
    color: var(--mantine-color-black);
  }

  @mixin where-dark {
    color: var(--mantine-color-dark-0);
  }

  &:where([data-with-title]) {
    @mixin where-light {
      color: var(--mantine-color-gray-6);
    }

    @mixin where-dark {
      color: var(--mantine-color-dark-2);
    }
  }
}

.closeButton {
  @mixin hover {
    @mixin where-light {
      background-color: var(--mantine-color-gray-0);
    }

    @mixin where-dark {
      background-color: var(--mantine-color-dark-8);
    }
  }
}
